<template>
    <div class="main">
        <div class="center">
            <h3>登录系统页面</h3>
            <el-form class="el-form" :rules="rules" :model="loginForm" ref="loginFormRef">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" size="large" placeholder="账号" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" style="margin-top: 20px;" size="large" type="password" placeholder="密码" @keyup.enter="submit"/>
            </el-form-item>
            <el-form-item prop="code">
                <p class="code">
                    <el-input v-model="loginForm.code" class="el-input" size="large" placeholder="验证码" @keyup.enter="submit"/>
                    <div class="code-img"  @click="getImgCode">
                        <img class="img" :src="codeUrl"/>
                    </div>
                </p>
            </el-form-item>
            </el-form>
            <el-checkbox v-model="loginForm.remember" label="记住密码" size="large"/>
            <el-button color="#626aef" class="login-button" :loading="loading" @click="submit">{{ loginText }}</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance,computed } from 'vue'
import * as TokenUtils from '@/utils/tokenUtils.js'
import { useRouter, useRoute } from 'vue-router'
import req from '@/api/index.js'
import { ElMessage } from 'element-plus'
import { nanoid } from 'nanoid'
import 'nprogress/nprogress.css'
const loginFormRef = ref(null)
const router = useRouter()
let { proxy } = getCurrentInstance();
const loading = ref(false)
const loginText = computed(()=>{
    return loading.value ? '登录中...' : '登录'
})
const loginForm = ref({
    username: '',
    password: '',
    code: '',
    uuid: '',
    remember: ''
})
const rules = ref({
    username: [{ required: true, message: '不能输入空', trigger: 'blur' }],
    password: [{ required: true, message: '不能输入空', trigger: 'blur' }],
    code: [{ required: true, message: '不能输入空', trigger: 'blur' }]
})
// 验证码图片路径
const codeUrl = ref()
const formDataRef = ref(null)
watch(() => loginForm.value.remember, (n, o) => {
    console.log(n, o)
})

/**
 * @description: 点击提交按钮
 * @return {void}
 */
const submit = async () => {
    proxy.$refs.loginFormRef.validate((vaild, fields) =>{
        if(vaild){
            login()
        }else {
            console.log('error submit!', fields)
        }
    })
    // localStorage.setItem('Token', '123456')
    //验证是否登录状态
    if (!localStorage.getItem('Token')) {
    }
    else {
        //已经是登录状态,跳转到首页
        router.push('/home')
    }
}

const login = async () =>{
    loading.value = true
    loginForm.value.uuid = nanoid()
    console.log('loginForm=', loginForm.value)
    const res = await req('login', { ...loginForm.value })
    if(res.code === 200){
        console.log('login=', res.token)
        Cookies.setToken('token')
        const a = await req('getRouter',{},true)
        console.log('a=', a)
        router.push({path: '/home'})
        loading.value = false
    }
    else{
        ElMessage.error(res)
        loading.value = false
    }
}

const getImgCode = async () => {
    // 获取图片base64编码
    const { img } = await req('getCodeImg')
    codeUrl.value = "data:image/gif;base64," + img
}
onMounted(() => {
    getImgCode()
    console.log('ref=', loginFormRef.value)
})
</script>
<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.main{
    
    background: rgb(228, 221, 221);
    width: 100%;
    background-image: url('http://vue.ruoyi.vip/static/img/login-background.f9f49138.jpg');
    background-size: cover;
    height: 100vh;
    display: flex;
}
.center{
    margin: auto;
    width: 400px;
    background: #fff;
    height: auto;
    display: flex;
    padding: 25px;
    border-radius: 6px;
    flex-direction: column;
    h3{
        text-align: center
    }
    .code{
        display: flex;
        flex-direction: row;
        .el-input{
            margin-top: 20px;
            width:200px
        }
        .code-img{
            height: 30px;
            margin-top: 20px;
            margin-left: 30px
        }
    }
}
img{
    width:115px;
    height: 40px;
}

.el-form{
    width: 350px;
    margin: 20px auto;
}
.login-button {
    width:350px;
    height:40px;
    margin-top: 10px
}
</style>